<template>
  <div class="home-page">
    <!-- Banner 横幅 -->
    <section class="banner">
      <div class="content">
        <h1>智录一体平台</h1>
        <p>融合数据采集、智能分析、设备管理于一体的综合性平台</p>
      </div>
    </section>

    <!-- 核心功能模块 -->
    <section class="features">
      <div class="feature animate">
        <h2>设备实时监控</h2>
        <p>实时采集设备运行数据，异常预警及时推送</p>
      </div>
      <div class="feature animate">
        <h2>智能分析决策</h2>
        <p>通过算法模型分析数据，辅助管理人员科学决策</p>
      </div>
      <div class="feature animate">
        <h2>多维数据可视化</h2>
        <p>丰富图表展示，帮助快速掌握现场运行情况</p>
      </div>
    </section>

    <!-- 平台优势介绍 -->
    <section class="advantages">
      <div class="text animate">
        <h2>平台优势</h2>
        <ul>
          <li>统一平台，功能集成，部署灵活</li>
          <li>支持多种设备接入协议，兼容性强</li>
        </ul>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <p>© 2025 智录一体平台 - All Rights Reserved.</p>
      <p>苏ICP备12345678号</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  mounted() {
    const observer = new IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add("show");
            }
          });
        },
        { threshold: 0.2 }
    );

    const animatedEls = document.querySelectorAll(".animate");
    animatedEls.forEach(el => observer.observe(el));
  }
};
</script>

<style scoped>
.home-page {
  font-family: "Segoe UI", sans-serif;
  color: #2c3e50;
}

/* ========== Banner 横幅 ========== */
.banner {
  background: linear-gradient(135deg, #c0c4cc, #03a9f4);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.banner .content {
  opacity: 0;
  transform: translateY(-30px);
  animation: slideIn 1s ease forwards;
  animation-delay: 0.3s;
}

.banner h1 {
  font-size: 48px;
  margin-bottom: 16px;
}

.banner p {
  font-size: 20px;
  max-width: 600px;
  margin: 0 auto;
}

/* ========== 动画效果 ========== */
.animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 功能模块 ========== */
.features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 60px 20px;
  background: #f4f6f9;
  text-align: center;
}

.feature {
  max-width: 300px;
}

.feature h2 {
  font-size: 24px;
  color: #2962ff;
  margin-bottom: 10px;
}

/* ========== 平台优势 ========== */
.advantages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 40px 20px;
  background: white;
  align-items: center;
}

.advantages .text {
  max-width: 500px;
}

.advantages .text h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.advantages .text ul {
  list-style: disc;
  padding-left: 20px;
  line-height: 1.8;
}

/* ========== 页脚 ========== */
.footer {
  background: #b4bccc;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}
</style>
